<html>
  <head>
    <title>在组件间共享状态</title>
  </head>
  <body>
    <script>
      // 在组件间共享状态
              /*
                  有时候，你希望两个组件的状态始终同步更改。
                  要实现这一点，可以将相关状态(state)从这两个组件上移除，并把state放到它们的"公共父级组件"，
                  再通过属性props将状态传递给这两个组件。
                  这被称为"状态提升"，这是编写React代码时常做的事情。
              */

              // 举个例子说明一下状态提升
                    /*
                        在下面的例子里，父组件 According 渲染了2个独立的Panel组件。

                        According:
                              Panel
                              Panel

                        每个Panel组件都有一个布尔值isActive，用于控制其内容是否可见。
                    */
                                import { useState } from 'react';

                                function Panel({ title, children }) {
                                  const [isActive, setIsActive] = useState(false);
                                  return (
                                    <section className="panel">
                                      <h3>{title}</h3>
                                      {isActive ? (
                                        <p>{children}</p>
                                      ) : (
                                        <button onClick={() => setIsActive(true)}>
                                          显示
                                        </button>
                                      )}
                                    </section>
                                  );
                                }

                                export default function Accordion() {
                                  return (
                                    <>
                                      <h2>哈萨克斯坦，阿拉木图</h2>
                                      <Panel title="关于">
                                        阿拉木图人口约200万，是哈萨克斯坦最大的城市。它在 1929 年到 1997 年间都是首都。
                                      </Panel>
                                      <Panel title="词源">
                                        这个名字来自于 <span lang="kk-KZ">алма</span>，哈萨克语中“苹果”的意思，经常被翻译成“苹果之乡”。事实上，阿拉木图的周边地区被认为是苹果的发源地，<i lang="la">Malus sieversii</i> 被认为是现今苹果的祖先。
                                      </Panel>
                                    </>
                                  );
                                }

                    // 我们发现点击其中一个面板中的按钮并会影响另外一个，它们是相互独立的。
                    /*
                       假设现在您想改变这种行为，以便在任何时候只展开一个面板。
                       在这种设计下，展开第二个面板应该会折叠第一个面板。您如何做到这一点呢？

                       要协调好这两个面板，我们需要分 3 步将"状态提升"到他们的父组件中》
                                ①、从子组件中移除用于控制显示的状态
                                ②、从父组件传递硬编码数据
                                ③、为共同的父组件添加状态，并将其与事件处理函数一起向下传递。
                    */
    </script>
  </body>
</html>